<template>
  <div class="settings">
    <top-bar :title="'个人设置'"/>
    <div class="content">
      <div class="content-item" @click="skipManage('changePhone')">
        <span class="name">{{mobileBtnTxt}}</span>
        <span class="manage">管理</span>
        <img src="@/assets/images/personal_center/Shape@2x.png" alt="">
      </div>
      <div class="content-item" @click="skipManage('certification')">
        <span class="name">防沉迷认证</span>
        <span class="manage">{{ realDetail }}</span>
        <img src="@/assets/images/personal_center/Shape@2x.png" alt="">
      </div>
      <div class="content-item" @click="skipManage('changePass')">
        <span class="name">修改密码</span>
        <img src="@/assets/images/personal_center/Shape@2x.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import topBar from './topBar'

export default {
  name: 'settings',
  components: {
    topBar
  },
  computed: {
    userDetail () {
      return this.$store.state.userDetail
    },
    realDetail () {
      if (this.userDetail.has_identify == 2) {
        return '已实名认证'
      } else if (this.userDetail.has_identify == 3) {
        return '实名中'
      }
      return '未实名认证'
    },
    mobileBtnTxt () {
      if (this.userDetail.has_bind_mobile !== 2) {
        return '绑定手机';
      } else {
        return '换绑手机';
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    // 个人设置的操作
    skipManage (type) {
      // 换绑手机
      if (type == 'changePhone') {
        if (this.userDetail.has_bind_mobile !== 2) {
          this.$router.push({path: '/me/bindingPhone'})
        } else {
          this.$router.push({path: '/me/changePhone'})
        }
      } else if (type == 'certification') {
        this.$router.push({path: '/me/certification'})
      } else if (type == 'changePass') {
        this.$router.push({path: '/me/changePass'})
      }
    }
  },
  created () {
    console.log(this.userDetail)
    this.$store.dispatch('getUserDetail')
  }
}
</script>

<style lang="scss" scoped>
.settings {
  padding: 0.75rem 0.48rem;

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 0.27rem;

    img {
      width: 0.48rem;
      height: 0.37rem;
      float: left;
    }

    span {
      margin-left: 3.2rem;
      font-size: 0.43rem;
      font-family: SourceHanSansCN-Bold, SourceHanSansCN;
      font-weight: bold;
      color: #292934;
    }
  }

  .content {
    padding: 0 0.29rem 0 0.32rem;

    .content-item {
      width: 100%;
      height: 1.39rem;
      display: flex;
      align-items: center;

      .name {
        flex: 1;
        font-size: 0.32rem;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #363739;
      }

      .manage {
        font-size: 0.29rem;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #999999;
      }

      img {
        width: 0.16rem;
        height: 0.24rem;
        margin-left: 0.13rem;
      }
    }
  }

  .content > .content-item:nth-child(2) .manage {
    color: #FF6200;
  }
}
</style>
